<!-- 组织机构列表-新增工作地点 -->
<template>
  <a-modal
    width="60%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
    :footer="type !== 3"
    unmount-on-close
  >
    <template #title>
      {{ type === 1 ? '新增工作地点' : '工作地点详情' }}
    </template>
    <div>
      <a-form
        :model="formData"
        :rules="rules"
        ref="refForm"
        :disabled="type === 3"
      >
        <a-form-item label="工作地点名称：" field="name">
          <a-input
            v-model="formData.name"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item label="类型：" field="typeId">
          <a-select v-model="formData.typeId" placeholder="请选择">
            <a-option
              v-for="item in organizationTypeList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="城市：" field="cityCode">
          <a-cascader
            :options="citiesJson"
            :field-names="{
              value: 'code',
              label: 'name'
            }"
            v-model="formData.cityCode"
            allow-search
            allow-clear
          />
        </a-form-item>
        <a-form-item label="详细地址：" field="address">
          <a-input
            allow-clear
            v-model="formData.address"
            placeholder="请输入"
          ></a-input>
        </a-form-item>
        <a-form-item label="邮政编码：">
          <a-input v-model="formData.code" placeholder="请输入"></a-input>
        </a-form-item>

        <a-form-item label="描述：">
          <a-textarea
            v-model="formData.remark"
            show-word-limit
            :max-length="300"
            :auto-size="{
              minRows: 5
            }"
            allow-clear
            placeholder="请输入"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import citiesJson from '@/assets/json/pc-code.json';
// import countriesJson from '@/assets/json/countries.json';
// import statesJson from '@/assets/json/states.json';
// import citiesJson from '@/assets/json/cities2.json';
import { CheckWorkPlaceList } from '@/apis/management/organization/organizationManagement';
import { OrganizationPatternSearch } from '@/apis/management/organization/baseSetting/organizationalType';
import { GetWorkTypeList } from '@/apis/management/organization/baseSetting';
import { validateRules } from '@/utils/common';
import { GetUserList } from '@/apis/management/user';
import { cloneDeep } from 'lodash';
import { f } from 'vuedraggable';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    list?: any; // 传进来的数据
    type: number; // 1 新增 2编辑 3详情
  }>(),
  {
    visible: false
  }
);

// 校验名字查重
const validateName = async (val: string, cb: any) => {
  try {
    if (val === props.list?.name && formData.value.id) {
      //
    } else {
      const data = {
        name: val
      };
      const res = await validateRules(CheckWorkPlaceList, data);
      if (res.code) {
        cb(`${res.msg}`);
      }
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  typeId: [
    {
      required: true,
      message: '请输入'
    }
  ],
  cityCode: [
    {
      required: true,
      message: '请选择'
    }
  ],
  address: [
    {
      required: true,
      message: '请输入'
    }
  ]
};

const emit = defineEmits(['update:visible', 'workpalceAddEmit']);

const formData = ref({
  name: '', // 工作地点名称
  cityCode: '', // 城市
  address: '', // 详细地址
  code: '', // 邮政编码
  typeId: undefined, // 类型
  remark: '' // 描述
});

const organizationTypeList = ref<any>([]); // 储存组织类型数据

// 获取组织类型数据
const getData = async () => {
  try {
    const { content } = await GetWorkTypeList({
      pageNumber: 0,
      pageSize: -1,
      type: 2
    });
    organizationTypeList.value = content.filter((el: any) => el.isEnable === 1);
    console.log(organizationTypeList.value);
  } catch (error: unknown) {
    console.log(error);
  }
};

let isEdit = ref(false); // 判断是否点击了编辑按钮
const edit = () => {
  isEdit.value = !isEdit.value;
};
let refForm = ref();
// 保存
const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emit('workpalceAddEmit', formData.value);
  emit('update:visible', false);
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};

watch(
  () => props.visible,
  (newVal: boolean, oldVal: boolean) => {
    if (newVal) {
      getData();
      if (props.list?.id) {
        formData.value = cloneDeep(props.list);
      } else {
        formData.value = {
          name: '', // 工作地点名称
          cityCode: '', // 城市
          address: '', // 详细地址
          code: '', // 邮政编码
          typeId: undefined, // 类型
          remark: '' // 描述
        };
      }
    }
  }
);
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
